<template>
  <div class="container">
    <div class="ProductList">
      <div class="list">
        <div class="left">
          <div class="complex">
            <h4>综合</h4>
            <p>共{{pagination.total_count}}项服务<img src="@/assets/images/icon_prev.png"/><span>{{pagination.page}}</span>/{{pagination.total_count}}<img src="@/assets/images/icon_next.png"/></p>
          </div>
          <a-empty style="margin-top:50px" v-if="productList.length === 0">
            <span slot="description"> 暂未搜索到任何内容~~ </span>
          </a-empty>
          <div class="ul">
            <div v-for="item in productList" :key="item.id" class="li" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
              <img :src="item.image"/>
              <h4>{{item.name}}</h4>
              <h5><ellipsis :length="32">{{item.describe}}</ellipsis></h5>
              <p v-if="item.price != 0">￥{{item.price}}</p>
              <p v-else>
                <a-button size="small" type="danger">立即咨询</a-button>
              </p>
            </div>
          </div>
          <a-pagination v-if="productList.length != 0" show-quick-jumper v-model="pagination.page" :total="pagination.total_count" />
        </div>
        <div class="right">
          <div class="service">
            <div class="trademark">
              <div class="txt">
                <h4>商标服务</h4>
                <h5>品牌建设提升价值</h5>
              </div>
            </div>
            <div class="patent">
              <div class="txt">
                <h4>专利服务</h4>
                <h5>抢占市场独占技术</h5>
              </div>
            </div>
            <div class="copyright">
              <div class="txt">
                <h4>版权服务</h4>
                <h5>杜绝剽窃维护权益</h5>
              </div>
            </div>
          </div>
          <!--        <div class="recommend">-->
          <!--          <h4>推荐阅读</h4>-->
          <!--          <ul>-->
          <!--            <li><a>创业人商标注册注意事项</a></li>-->
          <!--            <li><a>商标查询的方法有哪些</a></li>-->
          <!--            <li><a>北京商i包注册的流程及...</a></li>-->
          <!--            <li><a>商标注册哪家好？</a></li>-->
          <!--            <li><a>怎样查询商标已注册？</a></li>-->
          <!--            <li><a>注册商标可以选择几个分类</a></li>-->
          <!--          </ul>-->
          <!--          <h5><a>查看更多</a><img src="@/assets/images/icon_arrows.png"/></h5>-->
          <!--        </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import { search } from '@/api/product'
import apis from '@/api'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import store from 'store'
import { getNav } from '@/api/web'

export default {
  components: {
    Ellipsis
  },
  name: 'Search',
  data () {
    return {
      token: store.get(ACCESS_TOKEN),
      pagination: {},
      productList: [],
      navList: [],
      keyword: ''
    }
  },
  mounted () {
    this.getNavList()
    this.getList(this.$route.query.keyword)
  },
  methods: {
    getNavList () {
      getNav().then(res => {
        this.navList = res.result.data
      })
    },
    getList (keyword) {
      search(keyword).then(res => {
        this.productList = res.result.data
        this.pagination['total_count'] = res.result.total_count
        this.pagination['page'] = res.result.page
      })
    },
    onSearch () {
      if (this.keyword === '') {
        this.$warning({
          title: '务必输入要搜索的关键词'
        })
        return false
      }
      this.$nextTick(() => {
        this.$router.replace({ name: 'Search', query: { keyword: this.keyword } })
        this.getList(this.keyword)
      })
    },
    logout () {
      this.$store.dispatch('Logout').then(() => {
        window.location.reload()
      })
    },
    onSwt () {
      window.open(apis.Swt)
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style scoped>
h4, h5, p, li, ul, span {margin: 0;padding: 0;font-weight: 500;}
p, li, ul, span, input, textarea, form {margin: 0;padding: 0;font-weight: 500;}
.w1190 {
  width: 1190px;
  margin: 0 auto;
}

.header-top {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  font-size: 12px;
}

.header-top .ant-btn {
  font-size: 12px
}

.header-top .header-top-text {
  float: left;
}

.header-top .header-top-component {
  float: right;
}

.header-top .header-top-component a {
  color:#333;
}

/deep/ .header-top .ant-btn {
  color:#666;
}

.header-logo {
  height: 133px;
  background: #fff;
  overflow: hidden;
}

.header-logo .w1190{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo .logo-img{
  float: left;
}

.header-logo .header-search{
  wdith: 650px;
  float: right;
}
.header-nav{background-color: #ffffff;padding-bottom: 20px;}
.header-nav .w1190{display: flex;align-items: center;justify-content: space-between;}
.header-nav a{font-size: 16px;color: #666666;cursor: pointer;display: flex;align-items: flex-start;}
.header-nav a img{margin-left: 4px;}
.container {
  background: #f5f5f5;
}
.container .main-wrapper {
  width: 1190px;
  margin: 0 auto;
  overflow: hidden;
}
.container .main-wrapper .main-content {
  width: 1010px;
  float: right;
  padding-top: 10px;
}
.footer-wrapper{background-color: #16181a;margin-top:20px;padding: 60px 0 23px;}
.footer-wrapper ul{display: flex;align-items: center;justify-content: center;width: 1170px;margin: 0 auto;border-bottom: solid 1px #414550;padding-bottom: 44px;}
.footer-wrapper ul li{display: flex;align-items: center;justify-content: center;width: 33.33%;position: relative}
.footer-wrapper ul li:before{position: absolute;content: '';width: 1px;height: 74px;background-color: #414550;left: 0;top: 50%;margin-top: -37px;}
.footer-wrapper ul li:first-child:before{width: 0;}
.footer-wrapper ul li .txt{font-size: 16px;color: #ffffff;margin-left: 18px;}
.footer-wrapper ul li .txt span{font-size: 20px;font-weight: 700;}
.foot{text-align: center;}
.foot .link{margin: 24px 0 15px;}
.foot .link a{font-size: 16px;color: #ffffff;position: relative;padding: 0 18px;}
.foot .link a:before{position: absolute;content: '';width: 1px;height: 13px;background-color: #d3d3d3;left: 0;top: 50%;margin-top: -6px;}
.foot .link a:after{position: absolute;content: '';width: 1px;height: 13px;background-color: #727373;left: 1px;top: 50%;margin-top: -6px;}
.foot .link a:first-child:before,.foot .link a:first-child:after{width: 0;}
.foot p{font-size: 12px;color: #87888e;line-height: 24px;opacity: 0.6;}
.foot>a{font-size: 12px;color: #a2a2a2;display: inline-block;margin-top: 4px;}
.ProductList{width: 1200px;margin: 20px auto;}
.list{display: flex;justify-content: space-between;}
.list .left{width: 955px;}
.list .left .complex{background-color: #eeeeee;border-top: solid 1px #eeeeee;border-bottom: solid 1px #eeeeee;height: 42px;font-size: 12px;color: #999999;display: flex;align-items: center;justify-content: space-between;padding-right: 15px;}
.list .left .complex h4{font-size: 16px;color: #ffffff;background-color: #f4002b;line-height: 40px;width: 80px;text-align: center;}
.list .left .complex p{display: flex;align-items: center;}
.list .left .complex p span{color: #e52e3a;}
.list .left .complex p img{margin: 0 20px;}
.list .left .ul{display: flex;flex-flow: row wrap;margin-top: 10px;}
.list .left .ul .li{margin-right: 7px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: #ffffff;width: 233px;height: 233px;margin-bottom: 10px;}
.list .left .ul .li:nth-child(4n+4){margin-right: 0;}
.list .left .ul .li h4{font-size: 16px;color: #333333;margin-top: 5px;}
.list .left .ul .li h5{font-size: 12px;color: #999999;margin: 12px 0;}
.list .left .ul .li p{font-size: 18px;color: #f70306;font-weight: 700;}
.list .left .ul .li img{max-width: 200px;max-height: 120px;}
.list .right{width: 229px;}
.list .right .service{}
.list .right .service>div{position: relative;height: 215px;margin-bottom: 17px;}
.list .right .service .trademark{background: url("../../assets/images/bg_trademark.jpg")no-repeat center;}
.list .right .service .patent{background: url("../../assets/images/bg_patents.jpg")no-repeat center;}
.list .right .service .copyright{background: url("../../assets/images/bg_copyright.jpg")no-repeat center;}
.list .right .service .txt{position: absolute;left: 12px;bottom: 12px;}
.list .right .service h4{font-size: 16px;position: relative;color: #ffffff;padding-bottom: 3px;}
.list .right .service h4:before{position: absolute;content: '';width: 20px;height: 1px;background-color: #ffffff;left: 0;bottom: 0;}
.list .right .service h5{font-size: 14px;color: #ffffff;margin-top: 5px;}
.list .right .recommend{border: solid 1px #efefef;margin-top: 25px;}
.list .right .recommend h4{text-align: center;font-size: 16px;color: #333333;border-bottom: solid 1px #efefef;line-height: 38px;}
.list .right .recommend h5{display: flex;align-items: center;justify-content: flex-end;background-color: #ffffff;padding-bottom: 10px;padding-right: 20px;}
.list .right .recommend h5 a{font-size: 13px;color: #f70306;margin-right: 3px;}
.list .right .recommend h5 a:hover{text-decoration: underline;color: #ff734e;}
.list .right .recommend ul{background-color: #ffffff;padding: 5px 20px;}
.list .right .recommend ul li{line-height: 40px;height: 40px;}
.list .right .recommend ul li a{font-size: 14px;color: #666666;position: relative;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;padding-left: 15px;}
.list .right .recommend ul li a:before{position: absolute;content: '';width: 6px;height: 6px;background-color: #f70306;border-radius: 50%;left: 0;top: 50%;margin-top: -3px;}
.list .right .recommend ul li a:hover{color: #f70306;}
/deep/ .ant-pagination{justify-content: center;align-items: center;display: flex;margin-top: 50px;}
/deep/ .ant-tabs-ink-bar{background-color: #f4002b;}
/deep/ .ant-pagination-item-active a{color: #f4002b;}
/deep/ .ant-pagination-item-active{border-color: #f4002b;}
/deep/ .ant-tabs-nav .ant-tabs-tab-active{color: #f4002b;}
</style>
